<template>
  <div class="app-container pmDetail">
    <el-descriptions title="基本信息" :column="2" border>
      <el-descriptions-item label="对应街道">{{ baseinfo.jd }}</el-descriptions-item>
      <el-descriptions-item label="任务分区时间">{{ baseinfo.fq }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions class="margin-top-10" title="地图点位" border>
    </el-descriptions>
    <div class="map-btns">
      <i class="el-icon-crop" :class="{ isdraw: isdraw }" id="drawRectangle" @click="drawRect"></i>
    </div>
    <div id="container"></div>
    <p id="rectangleInfo" style="color: black;"></p>
    <el-table
      :data="chooseFw"
      height="250"
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        width="60"
        type="index"
      ></el-table-column>

      <el-table-column
        label="记录时间"
        align="center"
        prop="createTime"
        :show-overflow-tooltip="true"
      ></el-table-column>

      <el-table-column
        label="PM2.5"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.messageInfo.airData['PM2.5(ug/m3)'] }}
        </template>
      </el-table-column>

      <el-table-column
        label="NO2"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.messageInfo.airData['NO2(ppm)'] }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="60"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleEdit(scope.row, scope.$index)"
          >编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="修改轨迹信息" :visible.sync="open" width="650px" append-to-body>
      <el-form ref="form" :model="selectRow" label-width="80px">
        <el-form-item label="PM2.5(ug/m3)" prop="PM">
          <el-input v-model="selectRow.messageInfo.airData['PM2.5(ug/m3)']" placeholder="请输入设备ID" />
        </el-form-item>
        <el-form-item label="NO2(ppm)" prop="no2">
          <el-input v-model="selectRow.messageInfo.airData['NO2(ppm)']" placeholder="请输入设备ID" />
        </el-form-item>
        <el-form-item label="街道" prop="jd">
          <el-input v-model="selectRow.jd" placeholder="请输入街道" disabled />
        </el-form-item>
        <el-form-item label="任务分区" prop="fq">
          <el-input v-model="selectRow.fq" placeholder="请输入任务分区" disabled />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import { multipleTaskForHotmap, updateDjPath } from "@/api/wrj/djPath";
export default {
  name: 'pmDetail',
  dicts: ['sys_jd_name','sys_data_type'],
  data() {
    return {
      baseinfo: {},
      map: null,
      polygonArr: [],
      // pm2.5区块矩形数组对象，有颜色，
      pmPolygonArr:[],
      pm25List: [],
      editPointInfo: {},
      isEdit: false,
      textArr: [],
      textFontSize:10,
      showDataType:'PM2.5(ug/m3)',
      mouseTool: undefined,
      travelList: [],
      chooseFw: [], // 所选范围内的轨迹点位信息
      isdraw: false,
      open: false,
      selectRow: {
        messageInfo: { airData: {'PM2.5(ug/m3)': '', 'NO2(ppm)': ''} },
      },
      chooseIndex: null
    }
  },
  created() {
    if(this.$route.query.jd) {
      this.baseinfo.jd = this.$route.query.jd;
      this.baseinfo.fq = this.$route.query.fq;
      this.$nextTick(() => {
        this.getHotmapAndDjPath();
      })
    }
  },
  mounted() {
  },
  methods: {
    handleEdit(row, index) {
      // console.log(row, index);
      this.chooseIndex = index;
      this.open = true;
      this.selectRow = JSON.parse(JSON.stringify(row));
    },
    submitForm() {
      let originalData = JSON.stringify(this.selectRow.messageInfo);
      this.selectRow.originalData = originalData;
      updateDjPath(this.selectRow).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.$set(this.chooseFw, this.chooseIndex, this.selectRow);
        this.open = false;
      });
    },
    getHotmapAndDjPath() {
      multipleTaskForHotmap({
        ...this.baseinfo,
        pageNum: 1,
        pageSize: 99999
      }).then(res => {
        console.log(res)
        if(res.data.length > 0) {
          this.travelList = res.data;
          this.initAMap();
        }
      })
    },
    drawRect() {
      let that = this;
      this.map.clearMap();
      this.isdraw = !this.isdraw;
      if(this.isdraw) {
        console.log("开始绘图")
        // 开始绘制矩形
      this.mouseTool.rectangle({
        strokeColor: '#FF33FF', // 边框颜色
        strokeOpacity: 1, // 边框透明度
        strokeWeight: 2, // 边框宽度
        fillColor: '#1791fc', // 填充颜色
        fillOpacity: 0.4, // 填充透明度
      });

      // 监听绘制完成事件
      this.mouseTool.on('draw', function (event) {
        const { obj } = event; // 获取绘制的矩形对象
        const bounds = obj.getBounds(); // 获取矩形的范围
        const southWest = bounds.getSouthWest(); // 西南角坐标
        const northEast = bounds.getNorthEast(); // 东北角坐标

        // 显示矩形信息
        /* document.getElementById('rectangleInfo').innerText = `
          矩形范围：
          西南角坐标：${southWest.lng.toFixed(6)}, ${southWest.lat.toFixed(6)}
          东北角坐标：${northEast.lng.toFixed(6)}, ${northEast.lat.toFixed(6)}
        `; */

        that.travelList.forEach(item => {
          if(southWest.lng <= item.lng && item.lng <= northEast.lng && southWest.lat <= item.lat && item.lat <= northEast.lat) {
            that.chooseFw.push(item);
          }
        })
        console.log(that.chooseFw)

        var rectangle = new AMap.Rectangle({
          bounds: bounds,
          strokeColor:'#FF33FF',
          strokeWeight: 2,
          strokeOpacity:0.4,
          // strokeDasharray: [30,10],
          // strokeStyle还支持 solid
          fillColor:'#1791fc',
          fillOpacity:0.5,
          cursor:'pointer',
          zIndex:50,
        });
        rectangle.setMap(that.map);
        // 停止绘图工具
        that.mouseTool.close(true);
      });
      }
    },
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "ea203d3756bb886bcdd4833c10c332b9",
      };
      AMapLoader.load({
        key: "475db83acfc1af0cbab24fbdaa34072c", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale", "AMap.MouseTool"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then((AMap) => {
          this.defaultLayer = new AMap.createDefaultLayer()
          this.satelliteLayer = new AMap.TileLayer.Satellite();
          this.map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 15, // 初始化地图级别
            center: [120.577490, 29.932739], // 初始化地图中心点位置
            layers: [this.satelliteLayer],
          });
          // 启用绘图工具
          this.mouseTool = new AMap.MouseTool(this.map);
        })
        .catch((e) => {
          console.log(e);
        });
    },
  }
}
</script>

<style lang="scss" scoped>
.pmDetail {
  width: 100%;
  #container {
    width: 100%;
    height: 500px;
  }
  .isEdit {
    color: rgb(64, 158, 255);
    margin-left: 20px;
    font-size: 14px;
  }
  .margin-top-10 {
    margin-top: 10px;
  }
  .map-btns {
    position: absolute;
    top: 165px;
    right: 30px;
    z-index: 200;
    background-color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    > i {
      cursor: pointer;
    }
    .isdraw {
      color: aqua;
    }
  }
}
</style>

<style>
.pointEdit /deep/ .el-descriptions-item__label {
  width: 50% !important;
}

.pointEdit .el-descriptions__label {
  width: 50%; /* 设置您想要的宽度 */
  text-align: left; /* 根据需要设置对齐方式 */
}
</style>